﻿<%@page import="java.util.Date"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<%@ page contentType="text/html;charset=utf-8" language="java"%>
<%
	String baseP = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="<c:url value='/static/common/js/jquery.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/static/common/js/json2.js'/>"></script>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> 
<META HTTP-EQUIV="Expires" CONTENT="0"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>有奖问答</title>
<style type="text/css">
	*{
		margin:0px;
	}
	
	#question_title{
		font-size:1.4rem;
		font-weight:bolder;
		text-align:center;
		width:90%;
		margin:10px auto;
		text-shadow:1px 1px #00AA00, 2px 2px #00BB00, 3px 3px #00CC00, 4px 4px #00FF00;
	}
	
	#question_head{
		font-size:1.2rem;
		margin:10px 0px;
	}
	
	.question_content{
		font-size:1.2rem;
	}
	
	#question_btn{
		text-align:center;
	}
	
	#_submit a{
		text-decoration:none;
		display:inline-block;
		border-radius:0.5rem;
		width:25%;
		padding:0.5rem 1rem;
		background-color:red;
		text-align:center;
		margin:0px 35%;
		color:white;
	}
	
	#question_btn a{
		text-decoration:none;
		display:inline-block;
		padding:5px;
		font-weight:bolder;
		font-size:40px;
		text-shadow:0px 0px 10px red;
		color:white;
	}
	
	#question_tanchu{
		position:absolute;
		background:white;
		display:none;
		z-index:9;
		width:80%;
		overflow:auto;
		left:8%;
		top:8%;
	}
	
	#question_tanchu_closeBtn{
		width:17px;
		height:17px;
		position:absolute;
		background:url('images/close.gif');
		cursor:pointer;
	}
	
	img{
		width:1.4rem;
		height:1.4rem;
	}
	
	#zhezhao{
		background:rgba(0,0,0,0.8);
		position:absolute;
		left:0px;
		top:0px;
		display:none
	}
	#question_tanchu_content{
		padding:4%;
		font-size:0.8rem;
		line-height:1.4rem;
	}
	
	.float_div{
 		position:absolute;
		width:10px;
		height:10px;
		float:right;
		z-index:100;
		right:0;/*   定位到右上   */
		top:0;
	}
</style>
</head>
<body style="background:#F2F2F2">
	<div id="question_container" style="width:100%;">
		<div id="question_title">有奖问答</div>
		<div id="question_head"></div>
		<div id="question_body">
		</div>
		<!-- <div id="question_btn"><a href="javascript:tanchu()">提交</a></div> -->
		<div id="question_btn"><a href="javascript:submit()">提交</a></div>
	</div>
	<div id="question_tanchu" style="padding: 0.4rem;">
		<div class="float_div"><a href="javascript:closeTanChu()" style="text-decoration: none;color: red">X</a></div>
		<div id="question_tanchu_title" style="text-align: center"></div>
		<div id="question_tanchu_content" style="text-align: center"></div>
		<div style="text-align: center;margin-top:5%;" id="_submit"><!--  <a href="javascript:location.href='<c:url value='/gg/ggindex'/>?openId=${openId}';">去刮奖</a>--></div>
	</div>
	<div id="zhezhao"></div>
</body>
<script type="text/javascript">
	var question_list;		//存放问题列表
	var question_index=0;	//答题索引
	var question_count=0;	//问题数量 
	var answer=[];			//存放问题答案
	
	var options = ['A','B','C','D','E','F'];
	$(function(){
		/*if(!isWeiXin()){
			alert("请在微信中打开");
		}else*/
		{
			//加载问题列表
			$.get('<c:url value='/sc/question/list'/>',function(data){
				question_list = data.data;
				question_count = question_list.length;
				loadQuestion();
			},'json');
			
			$.get('<c:url value='/sc/question/isjoin'/>?openId=${openId}&number='+Math.random(),function(data){
				//已中奖并领取
				if(data.data[0] && data.data[0].mobile){
					switch(data.data[0].type){
					case 1:
						name="特等奖:雨水开花雨伞一个!";
						break;
					case 2:
						name="一等奖:数据线灯一个!";
						break;
					case 3:
						name="二等奖:信息保密章一个!";
						break;
					case 4:
						name="三等奖:多功能工具钳一个!";
						break;
					case 5:
						name="阳光奖:门磁报警器一个!";
						break;
					case 6:
						name="阳光奖:临时停车贴一个!";
						break;
					}
					var html="&nbsp;&nbsp;&nbsp;&nbsp;您已经参加过此活动，中"+name+"！";
					html+="<br>&nbsp;&nbsp;&nbsp;&nbsp;请在2015年10月26日~2015年11月13日，凭本人的身份证到人民路3998号（相城区人民路与润元路交叉口）苏州市公安局传达室领取奖品，逾期将不予发放奖品！";
					//html += "<br>苏州银行城区支行&nbsp;电话：0512-65153872";
					html += "<br>苏州市公安局&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电话：0512-65733861";
					$("#question_tanchu_content").html(html);
					//$("#_submit").html("<a href='javascript:closeTanChu();'>知道了</a>");
					$("#_submit").html("");
					tanchu();
				}
				/*
				if(data.data.length>0){
					var html="&nbsp;&nbsp;&nbsp;&nbsp;您已经参加过此活动，中"+name+"！";
					html+="<br>&nbsp;&nbsp;&nbsp;&nbsp;请在2015年03月16~2015年03月31，凭本人的身份证到干将西路56号苏州银行城区支行（庆元坊、干将西路口）领取奖品，逾期未领取，请到苏州市公安局（相城区人民路3998号）门卫处领取！";
					html += "<br>苏州银行城区支行&nbsp;电话：0512-65153872";
					html += "<br>苏州市公安局&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电话：0512-65733861";
					$("#question_tanchu_content").html(html);
					//$("#_submit").html("<a href='javascript:closeTanChu();'>知道了</a>");
					$("#_submit").html("");
					tanchu();
				};
				*/
			},'json');
		}
	});
	
	function checkIsjoin(){
		$.get('<c:url value='/sc/question/isjoin'/>?openId=${openId}&number='+Math.random(),function(data){
			if(data.data[0] && data.data[0].mobile){
				switch(data.data[0].type){
				case 1:
					name="特等奖:雨水开花雨伞一个!";
					break;
				case 2:
					name="一等奖:数据线灯一个!";
					break;
				case 3:
					name="二等奖:信息保密章一个!";
					break;
				case 4:
					name="三等奖:多功能工具钳一个!";
					break;
				case 5:
					name="阳光奖:门磁报警器一个!";
					break;
				case 6:
					name="阳光奖:临时停车贴一个!";
					break;
				}
				var html="&nbsp;&nbsp;&nbsp;&nbsp;您已经参加过此活动，中"+name+"！";
				html+="<br>&nbsp;&nbsp;&nbsp;&nbsp;请在2015年10月26日~2015年11月13日，凭本人的身份证到人民路3998号（相城区人民路与润元路交叉口）苏州市公安局传达室领取奖品，逾期将不予发放奖品！";
				//html += "<br>苏州银行城区支行&nbsp;电话：0512-65153872";
				html += "<br>苏州市公安局&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电话：0512-65733861";
				$("#question_tanchu_content").html(html);
				//$("#_submit").html("<a href='javascript:closeTanChu();'>知道了</a>");
				$("#_submit").html("");
				tanchu();
			}
			/*
			if(data.data.length>0){
				var html="&nbsp;&nbsp;&nbsp;&nbsp;您已经参加过此活动，中"+name+"！";
				html+="<br>&nbsp;&nbsp;&nbsp;&nbsp;请在2015年03月16~2015年03月31，凭本人的身份证到干将西路56号苏州银行城区支行（庆元坊、干将西路口）领取奖品，逾期未领取，请到苏州市公安局（相城区人民路3998号）门卫处领取！";
				html += "<br>苏州银行城区支行&nbsp;电话：0512-65153872";
				html += "<br>苏州市公安局&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电话：0512-65733861";
				$("#question_tanchu_content").html(html);
				//$("#_submit").html("<a href='javascript:closeTanChu();'>知道了</a>");
				$("#_submit").html("");
				tanchu();
			}*/
			else{
				var isSelect = false;
				$(".question_content").each(function(i){
					var imgPath = $(this).find("img").attr("src");
					if(imgPath.indexOf("radio_select1")!=-1){
						isSelect = true;
						var row = {"answer":""+$(this).attr("opt")+"","questionId":""+$(this).attr("quesid")+""};
						answer.push(row);
					}
				});
				
				if(!isSelect){
					alert("请选择答案");
					return;
				}
				
				if(question_index+1>question_count){
					$.post("<c:url value='/sc/question/submit'/>",{"answer":JSON.stringify(answer)},function(data){
						if(data.succ){
							if(data.data.length==0){
								$("#question_tanchu_title").empty();
								$("#question_tanchu_content").empty();
								$("#question_tanchu_content").append("<img src='/szgawx/static/theme/3/images/gongxi.png' />");
								$("#question_tanchu_content").append("<b>恭喜您，可以去抽奖了哦！</b>");
								/*.css({
									padding:"20%"
								});*/
								$("#_submit").html("<a href=javascript:location.href='/szgawx/gg/ggindex?openId=${openId}';>去刮奖</a>")
							}else{
								$("#question_tanchu_title").empty();
								$("#question_tanchu_content").empty();
								$("#question_tanchu_content").append("<img src='/szgawx/static/theme/3/images/shuai.png' />");
								$("#question_tanchu_content").append("<b>您没有全部答正确哦！</b>");
								$("#_submit").html("<a href='javascript:reviewQues();'>重新答题</a> ");
								/*$("#question_tanchu_title").append("<b>问题答案</b>");
								$.each(data.data,function(i,v){
									$("#question_tanchu_content").append((i+1)+"."+v.question+"<br>");
									$("#question_tanchu_content").append("答案："+v.answerRight+" "+v.answer+"<br><br>");
								});*/
							}
							tanchu();
						}else{
							alert(data.msg);
						}
					},'json');
				}else{
					loadQuestion();
				}
			}
		},'json');
	}
	
	function loadQuestion(){
		$.each(question_list,function(i,v){
			if(i==question_index){
				$("#question_body").empty();
				var opt = question_list[i].answerOption;
				var optArr = opt.split("||");
				var html = "";
				$.each(optArr,function(k,v){
					html += "<div class=\"question_content\" quesid=\""+question_list[i].id+"\" opt=\""+options[k]+"\"><img src=\"<c:url value='/static/theme/3/images/radio_unselect1.png'/>\" align=\"top\"><span>"+options[k]+"."+v+"</span></div>";
				});
				$("#question_body").append(html);
				$("#question_head").html(question_index+1+"."+question_list[i].question);
				initContent();
			}
		});
		question_index++;
	}

	function initContent(){
		//初始化问题界面的大小
		$(".question_content").each(function(i){
			this.style.padding="20px 0px";
		});
		
		$(".question_content").bind("click",function(){
			$(".question_content").find("img").attr("src", "<c:url value='/static/theme/3/images/radio_unselect1.png'/>");
			$(this).find("img").attr("src","<c:url value='/static/theme/3/images/radio_select1.png'/>");
		});
	}
	
	//提交回答
	function submit(){
		if(question_index==1){
			checkIsjoin();
		}else{
			var isSelect = false;
			$(".question_content").each(function(i){
				var imgPath = $(this).find("img").attr("src");
				if(imgPath.indexOf("radio_select1")!=-1){
					isSelect = true;
					var row = {"answer":""+$(this).attr("opt")+"","questionId":""+$(this).attr("quesid")+""};
					answer.push(row);
				}
			});
			
			if(!isSelect){
				alert("请选择答案");
				return;
			}
			
			if(question_index+1>question_count){
				$.post("<c:url value='/sc/question/submit'/>",{"answer":JSON.stringify(answer)},function(data){
					if(data.succ){
						if(data.data.length==0){
							$("#question_tanchu_title").empty();
							$("#question_tanchu_content").empty();
							$("#question_tanchu_title").append("<img src='/szgawx/static/theme/3/images/gongxi.png' />");
							$("#question_tanchu_title").append("<b>恭喜您，可以去抽奖了哦！</b>").css({
								padding:"20%"
							});
							$("#_submit").html("<a href=javascript:location.href='/szgawx/gg/ggindex?openId=${openId}';>去刮奖</a>")
						}else{
							$("#question_tanchu_title").empty();
							$("#question_tanchu_content").empty();
							$("#question_tanchu_content").append("<img src='/szgawx/static/theme/3/images/shuai.png' />");
							$("#question_tanchu_content").append("<b>您没有全部答正确哦！</b>");
							$("#_submit").html("<a href='javascript:reviewQues();'>重新答题</a> ");
							/*$("#question_tanchu_title").append("<b>问题答案</b>");
							$.each(data.data,function(i,v){
								$("#question_tanchu_content").append((i+1)+"."+v.question+"<br>");
								$("#question_tanchu_content").append("答案："+v.answerRight+" "+v.answer+"<br><br>");
							});*/
						}
						tanchu();
					}else{
						alert(data.msg);
					}
				},'json');
			}else{
				loadQuestion();
			}
		}
	}
	//重新答题
	function reviewQues(){
		closeTanChu();
		question_index=0;
		answer=[];
		$.get('<c:url value='/sc/question/list'/>',function(data){
			question_list = data.data;
			question_count = question_list.length;
			loadQuestion();
		},'json');		
	}
	//关闭弹出层
	function closeTanChu(){
		$("#zhezhao").fadeOut(1000);
		$("#question_tanchu").slideUp(1000);
	}
	
	//初始化弹出层
	function initTanchu(){
		$("#zhezhao").height(window.innerHeight).width(window.innerWidth);
	}
	
	//弹出层进行弹出的功能
	function tanchu(){
		initTanchu();
		$("#zhezhao").show();
		$("#question_tanchu").slideDown(1000);
	}
	
	function isWeiXin(){
		var ua = window.navigator.userAgent.toLowerCase();
		if(ua.match(/MicroMessenger/i) == 'micromessenger'){
			return true;
		}else{
			return false;
		}
	}
	
</script>
</html>